<template>
  <view class="dateBox">
    <view class="dateBoxTop" @click="handleCalendar">
      <view class="left">
        <span class="dates">{{ startDate }}</span>
        <span class="days">{{ startWeek }}</span>
        <span class="border">-</span>
        <span class="dates">{{ endDate }}</span>
        <span>{{ endWeek }}</span>
      </view>
      <span class="right">
        <span v-if="rightTitle">{{ rightTitle }}</span>
        <span v-else>共{{ sumDay }}天</span>
        <u-icon name="arrow-right"></u-icon>
      </span>
    </view>
    <cu-calendar ref="calendar" mode="range" @change="onChange"></cu-calendar>
  </view>
</template>

<script>
export default {
  name: 'cu-date',
  data() {
    return {
      show: false,
      // 留样日期
      timeObj: {
        startTime: '',
        endTime: ''
      },
      // 开始日期
      startDate: '',
      startWeek: '',
      // 结束日期
      endDate: '',
      endWeek: '',
      // 获取当天日期
      todayDate: '',
      // 获取两个日期差
      sumDay: 0
    }
  },
  props: {
    rightTitle: {
      type: String
    }
  },
  mounted() {
    this.getToday()
    this.getDefaultDay()
  },
  watch: {
    timeObj: {
      handler(val) {
        this.$emit('getTime',val)
      },
    //   immediate: true,
      deep: true
    }
  },
  methods: {
    onChange(e) {
      this.timeObj.startTime = e.startDate
      this.timeObj.endTime = e.endDate
      this.startDate = e.startMonth + '月' + e.startDay + '日'
      this.endDate = e.endMonth + '月' + e.endDay + '日'
      this.startWeek = e.startWeek
      this.endWeek = e.endWeek
      if (this.todayDate == e.startDate) this.startWeek = '今天'
      if (this.todayDate == e.endDate) this.endWeek = '今天'
      this.sumDay =
        (Date.parse(e.endDate) - Date.parse(e.startDate)) /
          (1 * 24 * 60 * 60 * 1000) +
        1
    },
    // 获取当天日期
    getToday() {
      this.todayDate = this.$cu.timeFormat(new Date(), 'yyyy-mm-dd')
    },
    // 获取默认三天数据
    getDefaultDay() {
      let myDate = new Date() //获取系统当前时间
      this.timeObj.startTime = this.$cu.getDate(-2, 'yyyy-mm-dd')
      this.timeObj.endTime = this.$cu.timeFormat(new Date(), 'yyyy-mm-dd')
      this.startDate = this.$cu.getDate(-2, 'mm月dd日')
      this.endDate = this.$cu.timeFormat(new Date(), 'mm月dd日')
      this.sumDay =
        (Date.parse(this.timeObj.endTime) -
          Date.parse(this.timeObj.startTime)) /
          (1 * 24 * 60 * 60 * 1000) +
        1
      this.endWeek = '今天'
      let startWeek = new Date(
        myDate.getTime() - 2 * 24 * 60 * 60 * 1000
      ).getDay()
      this.startWeek = this.getTimeWeek(startWeek)
    },
    // 获取日期转为星期
    getTimeWeek(weekNum) {
      let week = ''
      switch (weekNum) {
        case 0:
          week = '星期天'
          break
        case 1:
          week = '星期一'
          break
        case 2:
          week = '星期二'
          break
        case 3:
          week = '星期三'
          break
        case 4:
          week = '星期四'
          break
        case 5:
          week = '星期五'
          break
        case 6:
          week = '星期六'
          break
      }
      return week
    },
    // 日期触发事件
    handleCalendar() {
      this.$refs['calendar'].show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dateBox {
  .dateBoxTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #969799;
    margin-bottom: 24rpx;

    .left {
      .dates {
        font-size: 32rpx;
        font-weight: bold;
        color: #111;
        padding-right: 8rpx;
      }

      .border {
        padding: 0 16rpx;
      }
    }

    .right {
      color: #595a5b;
    }
  }
}
</style>
